<!--  -->
<template>
  <a-drawer
    :title="$t('all.autotext1197')"
    :with-header="false"
    :visible.sync="visible"
    :width="520"
    @close="closeDrawer(0)"
  >
    <a-form-model
      ref="formRef"
      style="padding-bottom:30px"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item :label="$t('all.autotext551')" prop="account">
        <a-input v-model="form.account" :maxLength="20" :placeholder="$t('all.autotext677')" />
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext977')" prop="name">
        <a-input v-model="form.name" :maxLength="50" />
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext1345')" prop="isAdmin">
        <a-select v-model="form.isAdmin" @change="handleAdminChange">
          <a-select-option :value="1">{{ $t('all.autotext279') }}</a-select-option>
          <a-select-option :value="0">{{ $t('all.autotext957') }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext682')" prop="phone">
        <a-input v-model="form.phone" />
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext44')" prop="email">
        <a-input v-model="form.email" />
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext785')" ref="orgId" prop="orgId">
        <a-select
          v-model="form.orgId"
          :placeholder="$t('all.autotext987')"
          @change="handleSelect(form.orgId)"
          allowClear
        >
          <a-select-option v-for="(item, index) in orgList" :value="item.id" :key="index">
            {{
              item.orgName
            }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <!-- <a-form-model-item
        label="科室"
        prop="orgHospitalDeptId"
        v-if="form.type == $const.USER_TYPE.ZUZHI.value && isHospital"
      >
        <a-select v-model="form.orgHospitalDeptId" placeholder="请选择所属科室" allowClear>
          <a-select-option v-for="(item, index) in depList" :value="item.id" :key="index">
            {{
              item.name
            }}
          </a-select-option>
        </a-select>
      </a-form-model-item> -->
      <a-form-model-item :label="$t('all.autotext1334')" prop="position">
        <a-input v-model="form.position" :maxLength="20" />
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext898')" prop="roleId" v-if="form.isAdmin">
        <a-select v-model="form.roleId" :placeholder="$t('all.autotext367')" allowClear>
          <a-select-option v-for="(item, index) in roleList" :value="item.id" :key="index">
            {{
              item.name
            }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
    <!-- 操作栏 -->
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1
      }"
    >
      <a-space>
        <a-button type="primary" :loading="loading" @click="handleOk">{{ $t('all.autotext792') }}</a-button>
        <a-button @click="closeDrawer(0)">{{ $t('all.autotext975') }}</a-button>
      </a-space>
    </div>
  </a-drawer>
</template>

<script>



import { getOrgList, addUser } from '@/api/system/user'
import { listOrgDepts } from '@/api/common'
import { roleList } from '@/api/system/role.js'



export default {
  name: '',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      form: {
        isAdmin: 0,
        orgHospitalDeptId: null
      },
      labelCol: { span: 6 },
      wrapperCol: { span: 15 },
      loading: false,
      orgList: [], // 机构list
      depList: [], // 科室list
      rules: {
        account: [
          { required: true, message: this.$t('all.autotext1107') },
          { pattern: /^[0-9a-zA-Z_]{1,}$/, message: this.$t('all.autotext1262') }
        ],
        userName: [{ required: true, message: this.$t('all.autotext254') }],
        name: [
          { required: true, message: this.$t('all.autotext479') },
          { pattern: /^[a-zA-Z\u4E00-\u9FA5\uf900-\ufa2d·s]{2,50}$/, message: this.$t('all.autotext1510') }
        ],
        email: [
          { required: false, message: this.$t('all.autotext1440') },
          { pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, message: this.$t('all.autotext969') }
        ],
        phone: [
          { required: true, message: this.$t('all.autotext33') },
          { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: this.$t('all.autotext140') }
        ],
        position: [{ required: false, message: this.$t('all.autotext1001') }],
        // orgId: [{ required: false, message: '请选择组织机构' }],
        // orgHospitalDeptId: [{ required: false, message: '请选择科室' }],
        type: [{ required: true, message: this.$t('all.autotext78') }],
        isAdmin: [{ required: true, message: this.$t('all.autotext1348') }]
        // roleId: [{ required: false, message: '请选择角色' }]
      },
      roleList: [],
      isPerson: false,
      isHospital: false
    }
  },
  watch: {
    visible (newValue) {
      if (newValue) {
        this.isHospital = false
      }
    }
  },
  mounted () {
    this.getInterfaceData()
  },
  methods: {
    // 获取组织机构
    getOrgList () {
      getOrgList().then(res => {
        this.orgList = res
      })
    },
    // // 获取角色list
    getRoleList () {
      roleList().then(res => {
        if (!Array.isArray(res)) res = []
        const isEnabled = status => +status === 1
        this.roleList = res.filter(e => isEnabled(e.status))
        this.roleList = this.roleList.filter(e => e.code !== 'PROJECT_ADMIN')
      })
    },
    getInterfaceData () {
      this.getOrgList()
      this.getRoleList()
    },
    // 获取科室列表
    getAreaList () {
      if (this.form.orgId) {
        listOrgDepts({ orgId: this.form.orgId })
          .then(res => {
            this.depList = res
          })
          .catch(() => {})
      }
    },
    checkHospital () {
      if (this.orgList && this.orgList.length && this.form.orgId) {
        const data = this.orgList.find(item => {
          return item.id === this.form.orgId
        })
        this.isHospital = data.type === 2
      } else {
        this.isHospital = false
      }
    },
    // select 回调
    handleSelect () {
      // 判断选中的机构是否是医院
      this.checkHospital()

      this.depList = []
      this.form.orgHospitalDeptId = null
      this.getAreaList()
    },
    // 类型改变
    handleTypeChange (val) {
      this.isPerson = Number(val) === 1 ? true : 0
    },
    // 系统管理员下拉框改变
    handleAdminChange (val) {
      if (!val) this.form.roleId = undefined
      this.form.isAdmin = val
      this.$forceUpdate()
    },
    // 确定回调
    handleOk () {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          addUser(this.form).then(res => {
            this.$message.success(this.$t('all.autotext470'))
            this.closeDrawer(1)
            this.createUser()
            this.createAccount()
          })
        }
      })
    },
    // 关闭对话框重置表单
    closeDrawer (val) {
      this.$emit('closeDrawer', val)
      this.$refs.formRef.resetFields()
      this.form = {
        isAdmin: 0,
        orgHospitalDeptId: null
      }
    },
    // 新建用户埋点
    createUser () {},
    // 新建账户埋点
    createAccount () {}
  }
}
</script>
<style scoped lang="less"></style>
